<script setup>
/**
 * v-model指令练习
 *  vue框架的基本逻辑为：数据驱动视图
 *  当我们使用v-model指令进行双向数据绑定时，其不仅可以数据驱动视图，同时视图也能影响数据
 *  v-model指令实际上是一个语法糖，其本质为 v-on + v-bind
 *  当我们对某标签进行双向数据绑定时，实际上就是使用v-bind绑定该标签的value值，并监听数据变更事件
 * 用途：
 *  通常用于快速获取表单数据，并且在一些需要数据同步的场景中也可以使用  
 */
  import {ref} from "vue"
  
  const num = ref("不是说好一起走到最后吗？")
</script>

<template>
<div>
  <form action="#">
    <!-- 1，直接使用双向数据绑定 -->
    <!-- <input type="text" v-model="num"> -->

    <!-- 2，原理使用 -->
    <!-- 
      使用v-bind指令，将响应式数据与目标标签的value值进行绑定，此时实现单向数据绑定，当数据改变，视图随之改变
      使用v-on指令，监听目标标签的数据变更事件，若是发生数据变更，则将新的数据赋值给响应式数据，此时再度实现单项数据绑定
    -->
    <input type="text" :value="num" @change="num = $event.target.value">
  </form>
</div>
</template>

<style scoped>

</style>